<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>MSK</title>

    <!-- Bootstrap Core CSS -->
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond./javascripts/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery -->
    <script src="/javascripts/jquery.js"></script>
    <script src="/javascripts/util.js"></script>
    <style type="text/css">
        .notsel {
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }

        .f_in {
            background: #ebebeb;
            font-size: 16px;
            font-weight: bold;
            padding: 10px;
            cursor: pointer;
            color: gray;
            border: 1px solid white;
        }

        .waimai {
            font-weight: bold;

        }


    </style>

    <script>
        var cacheData = {};
        function addCuisine(obj) {
            var template = "	 <div  style=\"float:left;background-color:rgb(38,188,213);color:white;margin-top:2px;\" class=\"f_in tmpc notsel\" onclick=\"removeCuisine(this)\" wxsid=\""
                    + $(obj).attr("wxsid")
                    + "\" wxstype=\"" + $(obj).attr("wxstype") + "\" wxsname=\"" + $(obj).attr("wxsname") + "\">" + $(obj).attr("wxsname")
                    + " <i class=\"fa fa-close fa-lg\"  style=\"color:rgb(167,220,224)\"></i>  "
                    + " </div>";
            $("#showArea").append($(template));
        }

        function removeOrder(obj) {
            $(obj).parent().parent().remove();
            synPrice();
        }

        $(document).ready(function () {
            $(".grid-item").click(function () {

                if ($("#showArea").find(".tmpc").length >= 5) {
                    alert("一份最多只能有5个!");
                    retrun;
                }
                addCuisine(this);
            });
        });


        function addToOrder() {
            var objs = $("#showArea").find(".tmpc");
            if (objs.length < 3) {
                alert("至少要选择3样菜式!");
                return;
            }
            var orderTmp = "";
            objs.each(function (i) {
                var wxstype = $(this).attr("wxstype");
                var wxsid = $(this).attr("wxsid");
                var wxsname = $(this).attr("wxsname");
                orderTmp += "<span  wxstype=\"" + wxstype + "\" wxsid=\"" + wxsid + "\"" + " wxsname=\"" + wxsname + "\" class=\"waimai\">" + wxsname + "&nbsp;</span>";
            });
            var jiage = 0;
            var caishigeshu = objs.length;
            if (caishigeshu == 3) {
                jiage = 10;
            } else if (caishigeshu == 4) {
                jiage = 12;
            } else if (caishigeshu == 5) {
                jiage = 15;
            }
            $(".tmpc").remove();
            var templet = "";

            templet = "<tr class=\"datatr\"><td class='oitems'>" + orderTmp + "</td><td ><a href='javascript:;' onclick='cr(this)' class=\"sl\">1</a><td>￥<span class='jg'>" + jiage + "</span></td><td> <i class=\"fa fa-minus-circle\" onClick=\"removeOrder(this)\" style=\"cursor:pointer;\"></i> </td></tr>"
            $("#cart").find(".counttr").before($(templet));
            synPrice();
        }

        function synPrice() {
            var total = 0;
            $("#cart .datatr").each(function (i, data) {
                var sl = $(data).find(".sl").html();
                var jg = $(data).find(".jg").html();
                total += sl * jg;
            });
            $("#totalcount").html(total);
        }

        function removeCuisine(obj) {
            $(obj).remove();
        }

        function cr(obj) {
            var num = prompt("请输入修改的数量", $(obj).html());
            var reg = /^\d+(?=\.{0,1}\d+$|$)/
            if (!reg.test(num)) num = 1;
            $(obj).html(num);
            synPrice();
        }

        function confirmOrder() {
            var name = $("#ousername").val();
            var phone = $("#ouserphone").val();
            var address = $("#ouseraddress").val();
            if (name == "" || phone == "" || address == "") {
                alert("个人信息不完整!");
                return;
            }
            var postData = {};
            var items = [];
            var total = 0;
            $("#cart .datatr").each(function (i, data) {
                var orderitem = {};
                var sl = $(data).find(".sl").html();
                var jg = $(data).find(".jg").html();
                var oitems = $(data).find(".oitems span");
                var ordername = "";
                $(oitems).each(function (i, data) {
                    var name = $(data).attr("wxsname");
                    ordername += name + " ";
                });
                orderitem["name"] = ordername;
                orderitem["count"] = sl;
                orderitem["price"] = sl * jg;
                total += sl * jg;
                items.push(orderitem);
            });
            postData["price"] = total;
            postData["name"] = name;
            postData["phone"] = phone;
            postData["address"] = address;
            postData["status"] = 0;
            postData["items"] = items;
            postData["time"] = new Date();
            console.log(JSON.stringify(postData));
            $.post("/order/confirm", {"postData": postData}, function () {
                alert("您的订单已在处理!");
                window.location.href = window.location.href;
            });
        }


    </script>

</head>

<body style="background-color:rgb(167,220,224)" class="notsel">
<!--
<div class="alert alert-warning" style="margin-bottom:0px;padding-top:5px;padding-bottom:5px;">
   <a href="#" class="close" data-dismiss="alert">
      &times;
   </a>
   <strong>提示：</strong>测试时测试
</div>
-->
<div class="container-fluid" role="navigation"
     style="background-color:rgb(38,188,213);padding-left:0px;padding-right:0px;min-height:50px;position:relative;">
    <div style="float:left;width:80%;" id="showArea">

    </div>
    <div style="position:absolute;right:2%;top:23%;cursor:pointer;">
        <i class="fa fa-plus-circle fa-lg" onclick="addToOrder()" style="color:rgb(167,220,224)"></i>
    </div>
</div>

<div class="container-fluid " style="background-color:rgb(167,220,224);border-top:2px solid white;padding-left: 0px;">
    <div>
        <div style="float:left;background-color:rgb(38,188,213);color:white;" class="grid-item f_in">肉类</div>
        <% ra.forEach(function(weixinshow, index) { %>
        <div style="float:left;" class="grid-item f_in" wxsname="<%= weixinshow.name %>" wxsid="<%= weixinshow._id %>"
             wxstype="<%= weixinshow.cstype %>"><%= weixinshow.name %>
            &nbsp;<i class="fa fa-plus fa-lg" style="color:rgb(167,220,224)"></i>
        </div>
        <% }) %>
    </div>
</div>
<div class="container-fluid "
     style="background-color:rgb(167,220,224);border-top:2px solid white;border-bottom:2px solid white;padding-left: 0px;">
    <div>
        <div style="float:left;background-color:rgb(38,188,213);color:white;" class="grid-item f_in">菜类</div>
        <% ca.forEach(function(weixinshow, index) { %>
        <div style="float:left" class="grid-item f_in" wxsname="<%= weixinshow.name %>" wxsid="<%= weixinshow._id %>"
             wxstype="<%= weixinshow.cstype %>"><%= weixinshow.name %>
            &nbsp;<i class="fa fa-plus fa-lg" style="color:rgb(167,220,224)"></i>
        </div>
        <% }) %>
    </div>

</div>


<div class="container-fluid "
     style="background-color:#ebebeb;border-top:2px solid white;border-bottom:2px solid white;padding-left: 0px;">
    <table class="table table-hover" id="cart">
        <thead>
        <tr>
            <th width="40%">名称</th>
            <th width="20%">数量</th>
            <th width="20%">价格</th>
            <th width="10%"></th>
        </tr>

        <tr class="counttr">
            <td style="font-weight:bold;">合计：</td>
            <td></td>
            <td>￥<span id="totalcount">0</span></td>
            <td>
                <button type="submit" class="btn btn-default" onclick="confirmOrder()">给我送货</button>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table class="table" style="background-color:#ebebeb;">
                    <tr>
                        <td style="font-weight:bold;">
                            名称:
                        </td>
                        <td><input class="form-control" name="ousername" id="ousername" value="<%= name %>"></td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold;">
                            手机号码:
                        </td>
                        <td><input class="form-control" name="ouserphone" id="ouserphone" value="<%= phone %>"></td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold;">
                            地址:
                        </td>
                        <td><input class="form-control" name="ouseraddress" id="ouseraddress" value="<%= address %>">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        </thead>
    </table>
</div>

<!-- /#w0rapper -->


<!-- Bootstrap Core JavaScript -->
<script src="/javascripts/bootstrap.min.js"></script>

</body>

</html>
